<template>
  <div class="cycle">
    <div class="container" :style="baseStyle">
      <div class="lefthalf" :style="rightCom"></div>
      <div class="righthalf" :style="leftCom"></div>
<<<<<<< HEAD
      <div class="centerData" :style="centerSize">{{ text }}</div>
=======
      <div class="centerData" :style="centerStyle">{{ text }}</div>
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    </div>

    {{ rate }}
  </div>
</template>

<script lang="ts">
import { ref, computed, watch } from "vue";
export default {
  props: {
    // Vue3 中 必须先定义 props 才可以使用
    rate: Number,
    text: String,
    size: Number,
<<<<<<< HEAD
=======
    layerColor: {
      //进度条颜色
      type: String,
      default: "#07C460",
    },
    fill: {
      // 中心填充颜色
      type: String,
      default: "#fff",
    },
    color: {
      // 中心文字颜色
      type: String,
      default: "#0DB392",
    },
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
  },
  activated() {
    console.log("sdhjusdh");
  },
  setup(props, ctx) {
    let rate = ref(props.rate);
    let text = ref(props.text);
<<<<<<< HEAD
=======
    let layerColor = ref(props.layerColor);
    let fill = ref(props.fill);
    let color = ref(props.color);
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    const size = ref(props.size);
    const addOne = () => {
      rate.value += 10;
    };
<<<<<<< HEAD
    console.log(props.rate);
    /*
      watch 监听响应式的数据  需要通过回调的形式进行监听
    */
    watch(
      () => props.rate,
      (newVal) => {
        rate.value = newVal;
        text.value = String(newVal) + "%";
      }
    );
    /*
      错误写法  直接监听是获取不到数据的
    */
    // watch(rate, (newVal, oldVal) => {
    //   if (newVal > 100) {
    //     rate.value = newVal - 100;
    //     console.log("nowVal", rate.value);
    //   }
    // });
    const baseSize = computed(() => {
      return `width:${size.value}px;height:${size.value}px;`;
    });
    const centerSize = computed(() => {
      return `width:${size.value - 10}px;height:${size.value - 10}px;`;
    });
    const rightCom = computed(() => {
=======
    console.log("kkk", props.rate);
    watch(props, () => {
      rate = ref(props.rate);
      console.log("change", rate.value);
      text = ref(props.text);
      layerColor = ref(props.layerColor);
      fill = ref(props.fill);
      color = ref(props.color);
    });
    watch(rate, (newVal, oldVal) => {
      // console.log("1111");
      if (newVal > 100) {
        rate.value = newVal - 100;
        console.log("nowVal", rate.value);
      }
    });
    const baseStyle = computed(() => {
      return `width:${size.value}px;height:${size.value}px;background:${layerColor.value}`;
    });
    const centerStyle = computed(() => {
      return `width:${size.value - 10}px;height:${
        size.value - 10
      }px;background-color:${fill.value};color:${color.value}`;
    });
    const rightCom = computed(() => {
      console.log("comming here");
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
      let baseStr = `clip: rect(0 auto auto ${size.value / 2}px);`;
      if (rate.value <= 50) {
        baseStr += `transform: rotate(${360 * (rate.value / 100)}deg);`;
      } else if (rate.value > 50) {
        baseStr += `background-color: rgb(13, 179, 146)`;
      }
      return baseStr;
    });
    const leftCom = computed(() => {
      let baseStr = `clip: rect(auto ${size.value / 2}px auto auto);`;
      if (rate.value > 50) {
        baseStr += `transform: rotate(${360 * ((rate.value - 50) / 100)}deg)`;
      }
      return baseStr;
    });
<<<<<<< HEAD
    return { rate, addOne, rightCom, leftCom, text, baseSize, centerSize };
=======
    return { rate, addOne, rightCom, leftCom, text, baseStyle, centerStyle };
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 200px;
  height: 200px;
  // background: rgb(13, 179, 146);
  border-radius: 50%;
  position: relative;
  z-index: 11;
  .lefthalf {
    width: 100%;
    height: 100%;
    background-color: rgb(216, 208, 217);
    clip: rect(0 auto auto 100px);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    z-index: 10;
    transition: all ease-in-out 0.5s;
  }
  .righthalf {
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: rgb(216, 208, 217);
    clip: rect(auto 100px auto auto);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    transition: all ease-in-out 0.5s;
  }
  .centerData {
    width: 90px;
    height: 90px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 15;
    font-size: 18px;
    font-weight: bold;
    // color: rgb(13, 179, 146);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>